<!--
 * @Description: 大屏模版4
 * @Author: gaoyunpeng
 * @Date: 2022-01-22 19:47:39
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="home-div">
    <Map></Map>
    <!-- 左边布局 -->
    <div class="view-left">
      <div class="left-top">
        <div class="title">标题</div>
        <div class="content"></div>
      </div>
      <div class="left-center">
        <div class="title">标题</div>
        <div class="content"></div>
      </div>
      <div class="left-bottom">
        <div class="title">标题</div>
        <div class="content"></div>
      </div>
    </div>
    <!--右边布局 -->
    <div class="view-right">
      <div class="right-top">
        <div class="title">标题</div>
        <div class="content"></div>
      </div>
      <div class="right-center">
        <div class="title">标题</div>
        <div class="content"></div>
      </div>
      <div class="right-bottom">
        <div class="title">标题</div>
        <div class="content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from '@/components/map/index.vue'
export default {
  components: {
    Map
  },
  data() {
    return {
      title: '动态统计',
      barName: ['文档数', '任务数'],
      barX: [
        '2019/03/01',
        '2019/03/02',
        '2019/03/03',
        '2019/03/04',
        '2019/03/05',
        '2019/03/06',
        '2019/03/07'
      ],
      list1: [
        {
          type: 'line',
          name: '文档数',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          type: 'line',
          name: '任务数',
          data: [220, 182, 191, 234, 290, 330, 310]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.home-div {
  position: relative;
  width: 100%;
  height: 100%;
  .view-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    width: 450px;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(5, 22, 57, 0.2) 0%,
      rgba(18, 63, 104, 0.4) 100%
    );
    // background: linear-gradient(
    //   180deg,
    //   rgba(5, 22, 57, 0.4),
    //   rgba(18, 63, 104, 0.9)
    // );
    -webkit-box-shadow: #07417a 0 0 10px;
    -moz-box-shadow: #07417a 0 0 10px;
    box-shadow: inset 0 0 30px #07417a;
    background-image: -webkit-radial-gradient(
      250px 250px at 50% 50%,
      hsla(209, 99%, 32%, 28),
      hsla(228, 100%, 0%, 0)
    );
    .left-top,
    .left-center,
    .left-bottom {
      flex: 1;
      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        @include font_color('title_color');
        background: linear-gradient(
          180deg,
          rgba(5, 22, 57, 0.4),
          rgba(18, 63, 104, 0.9)
        );
      }
      .content {
        width: 100%;
        height: calc(100% - 30px);
      }
    }
  }
  .view-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    width: 450px;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(5, 22, 57, 0.2) 0%,
      rgba(18, 63, 104, 0.4) 100%
    );
    -webkit-box-shadow: #07417a 0 0 10px;
    -moz-box-shadow: #07417a 0 0 10px;
    box-shadow: inset 0 0 30px #07417a;
    background-image: -webkit-radial-gradient(
      250px 250px at 50% 50%,
      hsla(209, 99%, 32%, 28),
      hsla(228, 100%, 0%, 0)
    );
    .right-top,
    .right-center,
    .right-bottom {
      flex: 1;
      .title {
        display: flex;
        height: 30px;
        @include font_color('title_color');
        align-items: center;
        justify-content: center;
        background: linear-gradient(
          180deg,
          rgba(5, 22, 57, 0.4),
          rgba(18, 63, 104, 0.9)
        );
      }
      .content {
        width: 100%;
        height: calc(100% - 30px);
      }
    }
  }
}
</style>
